import React from 'react'

const Component = () => {
  const [searchParams] = React.Router.useSearchParams()
  let [orderid, SetID] = React.useState(searchParams.get('orderid') ? searchParams.get('orderid') : 0)
  let [guest, SetGuest] = React.useState([])
  let [order, SetOrder] = React.useState({
    starttime_text: '',
    startday_text: '',
    endtime_text: '',
    endday_text: '',
    order_day: '',
    origin_price: '',
    price: '',
    type_text: '',
    remark: '',
    status_text: '',
    status: '',
    comment: '',
    rate: '',
    roomid: '',
    room: {
      price: '',
      thumb_text: '',
      name: '',
      flag_text: [],
    }
  })
  let [rate, SetRate] = React.useState('')
  let [comment, SetComment] = React.useState('')

  React.useEffect(() => {
    request()
  }, [])

  const request = async () => {
    var result = await React.HTTP.post('/order/info', { orderid })

    if (result.code == 0) {
      React.error(result.msg)
      return false
    }

    SetOrder(result.data.order)
    SetGuest(result.data.guest)
  }

  const ContentChange = (value: any) => {
    SetComment(value)
  }

  const confirm = async () => {
    // 组装数据
    var data = {
      orderid: orderid,
      comment: comment,
      rate: rate
    }

    var result = await React.HTTP.post('/order/comment', data)

    if (result.code == 0) {
      React.error(result.msg, () => { })
      return false
    } else {
      React.success(result.msg, () => {
        request()
      })
    }
  }

  // 评论内容
  const CommentView = () => {
    if (order.status < '3') {
      return (<></>)
    }

    if (order.comment && order.rate) {
      return (
        <div className='info_footer'>
          <div className="content_title">评价信息</div>
          <div className="comment">
            <React.UI.Rate value={order.rate} readOnly />

            <React.UI.Divider
              style={{
                color: '#1677ff',
                borderColor: '#1677ff',
                borderStyle: 'dashed',
              }}
            ></React.UI.Divider>

            <React.UI.TextArea placeholder="请输入评论内容" defaultValue={order.comment} readOnly />
          </div>
        </div>
      )
    } else {
      return (
        <div className='info_footer'>
          <div className="content_title">评价信息</div>
          <div className="detail comment">
            <React.UI.Rate value={rate} onChange={(val: number) => SetRate(val.toString())} />

            <React.UI.Divider
              style={{
                color: '#1677ff',
                borderColor: '#1677ff',
                borderStyle: 'dashed',
              }}
            ></React.UI.Divider>

            <React.UI.TextArea placeholder="请输入评论内容" value={comment} onChange={(val: any) => SetComment(val)} />

            <React.UI.Button onClick={confirm} color='primary'>提交评价</React.UI.Button>
          </div>
        </div>
      )
    }
  }

  return (
    <>
      <link rel="stylesheet" href="/assets/css/order_info.css" />

      <div className="order_info">
        <div className="info_title">
          <h3>{order.status_text}</h3>
        </div>
        <div className="info_content">
          <div className="content_title">订单信息：</div>

          <div className="content_item">
            <p>入住时间</p>
            <div>{order.starttime_text} {order.startday_text} - {order.endtime_text} {order.endday_text}</div>
          </div>

          <div className="content_item">
            <p>入住天数</p>
            <div>共 {order.order_day} 晚</div>
          </div>

          {
            order.origin_price != order.price ?
              (
                <>
                  <div className="content_item">
                    <p>优惠价格</p>
                    <div className="content_price">￥{order.price}</div>
                  </div>
                  <div className="content_item">
                    <p>订单原价</p>
                    <div className="content_price"><s>￥{order.origin_price}</s></div>
                  </div>
                </>
              ) :
              (
                <div className="content_item">
                  <p>订单价格</p>
                  <div className="content_price">￥{order.price}</div>
                </div>
              )
          }

          <div className="content_item">
            <p>房间单价</p>
            <div className="content_price">￥{order.room.price}</div>
          </div>

          <div className="content_item">
            <p>支付方式</p>
            <div>{order.type_text}</div>
          </div>
          <div className="content_item">
            <p>入住人数</p>
            <div>{guest.length} 人</div>
          </div>
          <div className="content_item">
            <p>订单备注</p>
            <div>{order.remark}</div>
          </div>
        </div>

        <div className="info_footer">
          <div className="content_title">房屋信息：</div>
          <div className="detail" onClick={() => React.navigate(`/room/info?rid=${order.roomid}`)}>
            <div className="thumb">
              <img src={order.room.thumb_text} />
            </div>
            <div className="right">
              <p>{order.room.name}</p>
              <div className="tips">
                {order.room.flag_text && order.room.flag_text.map((item: any, key: number) => <React.UI.Tag key={key} color='primary'>{item}</React.UI.Tag>)}
              </div>
            </div>
          </div>
        </div>

        <div className="info_footer">
          <div className="content_title">住客信息：</div>
          <div className="detail">
            <React.UI.List className="list">
              {guest.map((item: any) => (
                <React.UI.List.Item
                  key={item.nickname}
                  description={`手机号码：${item.mobile}`}
                >
                  {item.nickname}({item.gender_text})
                </React.UI.List.Item>
              ))}
            </React.UI.List>
          </div>
        </div>

        {CommentView()}

      </div>
    </>
  )
}

export default Component
